<style lang="scss">
    @import "../../../utils/base.scss";

    .my-table-title{
      border-top-style:solid;
      border-left-style:solid;
      border-width:1px;
      border-color:#7b7777;
      float:left;
      width:15%;
      font-weight: bolder;
      overflow:hidden;
    }

    .my-table-content{
      border-top-style:solid;
      border-left-style:solid;
      border-width:1px;
      border-color:#7b7777;
      float:left;
      width:35%;
      overflow:hidden;
      white-space:normal;
      word-break:break-all;
    }

    .my-table-last{
      border-bottom: 1px solid rgb(210,210,210);
      border-width:1px;
      border-color:#7b7777;
      padding-bottom:1cm;
      width:600px;
    }

    .my-th{
      width:10vw;
      padding-left:10px;
    }

    .my-td{
      width:20vw;
      padding-left:10px;
    }
</style>

<template>
  <div>
<!--       <template v-for="(item, index) in printObject">
        <div class="my-table-title">
          <span>{{printObject[index].title}}</span>
        </div>
        <div class="my-table-content">
          <span>{{printObject[index].value}}</span>
        </div>
      </template> -->


      <table border="1px" class="tale" align="center" style="width:100%;">
        <template v-for="(item, index) in printLength">
          <tr align="left" style="height: 3vw;" v-if="printObject[index*3].type==0">
            <template>
              <template v-if="((index*3)<(printObject.length)) && (printObject[index*3].type==0)">
                <th class="my-th">{{printObject[index*3].title}}</th>
                <td class="my-td">{{printObject[index*3].value}}</td>
              </template>
              <template v-else>
                <th class="my-th"></th>
                <td class="my-td"></td>
              </template>
            </template>
            <template>
              <template v-if="((index*3+1)<(printObject.length)) && printObject[index*3+1].type==0">
                <th class="my-th">{{printObject[index*3+1].title}}</th>
                <td class="my-td">{{printObject[index*3+1].value}}</td>
              </template>
              <template v-else>
                <th class="my-th"></th>
                <td class="my-td"></td>
              </template>
            </template>
            <template>
              <template v-if="((index*3+2)<(printObject.length)) && (printObject[index*3+2].type==0)">
                <th class="my-th">{{printObject[index*3+2].title}}</th>
                <td class="my-td">{{printObject[index*3+2].value}}</td>
              </template>
              <template v-else>
                <th class="my-th"></th>
                <td class="my-td"></td>
              </template>
            </template>
          </tr>
        </template>
        <template v-for="(item, index) in printObject">
          <tr align="left" style="height: 3vw;" v-if="item.type==1">
            <th class="my-th">{{item.title}}</th>
            <td class="my-td" colspan="5" style="word-wrap:break-word;word-break:break-all;white-space: pre-line;">{{item.value}}</td>
          </tr>
        </template>
      </table>

  </div>
</template>

<script>
  export default {
      data () {
          return {
            // printObject11:[
            //   {
            //     title:"工单ID：",
            //     value:"1588063817000003",
            //     type:0
            //   },
            //   {
            //     title:"工单标题：",
            //     value:"哒哒哒哒",
            //     type:0
            //   },
            //   {
            //     title:"所属系统：",
            //     value:"同一平台",
            //     type:0
            //   },
            //   {
            //     title:"所属租户：",
            //     value:"租户1111",
            //     type:0
            //   },
            //   {
            //     title:"所属项目：",
            //     value:"项目01",
            //     type:0
            //   },

            //   {
            //     title:"申请原因：",
            //     value:"因为hahahahhahahahahahhahahahahhahahahahahahahah",
            //     type:1
            //   },
            //   {
            //     title:"申请原因：",
            //     value:"因为hahahahhahahahahahhahahahahhahahahahahahahah",
            //     type:1
            //   },
            // ]
          }
      },
      methods: {
      },
      props: {
        printObject: {},
        printLength:0
      },
      watch:{
        printObject(val){
          console.log("=========printObject=========",val);
          this.printObject = val;
        },
        printLength(val){
          this.printLength = val;
        }
      }
  }

</script>